//  获取元素
const welcome = document.querySelector(".site-nav-login");
const loginBtn = document.querySelector(".login");

// 根据登录状态显示当前账号昵称
if (localStorage.login !== undefined) {
  // 到这里说明账号已经登录
  welcome.innerHTML = `欢迎您,   ${localStorage.name} <a id="quit">[退出]</a>
  `;

  // 给 退出登录 添加 点击事件
  const logoutBtn = document.querySelector("#quit");

  logoutBtn.addEventListener("click", function () {
    if (window.localStorage.login === undefined) {
      if (confirm("您还没有登录,是否跳转到登录页面?")) {
        window.location.href = `./login.html?url=${window.location.href}`;
      }
    } else {
      window.localStorage.removeItem("login");
      localStorage.removeItem("name");
      welcome.innerHTML = `
    <a href="javascript:;" class="login">登录</a>
    <span>|</span>
    <a href="./register.html">注册</a>
    `;
      const loginBtn = document.querySelector(".login");
      // 点击登录跳转登录页面并带参数过去
      loginBtn.addEventListener("click", function () {
        window.location.href = `./login.html?url=${window.location.href}`;
      });
    }
  });
}

// 点击登录跳转登录页面并带参数过去
loginBtn.addEventListener("click", function () {
  window.location.href = `./login.html?url=${window.location.href}`;
});

// 获取父元素
const cartBox = document.querySelector(".cart-box");

// 函数动态渲染页面
setPage();

cartBox.addEventListener("click", function (e) {
  // 获取 localStroage 里的 数组 内容
  const cartArr = JSON.parse(window.localStorage.cart);

  if (e.target.getAttribute("name") === "-") {
    // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
    // num属性值 累减 1 如果等于 1 禁用 当前标签
    cartArr[e.target.getAttribute("index") - 0].num--;
  } else if (e.target.getAttribute("name") === "+") {
    // 给 索引下标 和 点击标签存储的index值 相同的数据 修改 num属性值
    // num属性值 累加 1 如果等于 库存 禁用 当前标签
    cartArr[e.target.getAttribute("index") - 0].num++;
  } else if (e.target.getAttribute("name") === "del") {
    if (window.confirm("您确定要删除吗?")) {
      // 给 索引下标 和 点击标签存储的index值 相同的数据 删除
      cartArr.splice(e.target.getAttribute("index") - 0, 1);
    }
  }else if(e.target.getAttribute("name") === "empty"){
    cartArr.length = 0
  }
  // 将新的数组存入 localStroage 中
  window.localStorage.cart = JSON.stringify(cartArr);
  // 重新调用渲染函数渲染页面
  setPage();
});

// 页面渲染函数
function setPage() {
  // 定义变量 存储 结果 设定 全选按钮的属性
  // let all = true;
  // 定义变量 存储  商品数量 商品总价格
  let number = 0;
  let money = 0;

  if (window.localStorage.cart === undefined) {
    let noCartSrt = `
    <div class="empty">
    <img src="https://icon.zol-img.com.cn/ucdn/b-zol-com/1.0.2/img/shopping.f3cf1f2a.png" alt="">
    <p>购物车还没有商品,快去选购吧~</p>
    <a href="./index.html">去首页</a>
    `;
    cartBox.innerHTML = noCartSrt;
  } else {
    // 调用结果是 undefined 证明 有 cart属性
    // 其中存储的是 json字符串 需要还原为对应的数据结构
    const cartArr = JSON.parse(window.localStorage.cart);
    if (cartArr.length === 0) {
      // 到这里说明 localStroage 中有 购买记录,但是已经被清空了,所以 cart 数组长度为 0

      let emptyStr = `
      <div class="empty">
      <img src="https://icon.zol-img.com.cn/ucdn/b-zol-com/1.0.2/img/shopping.f3cf1f2a.png" alt="">
      <p>您的购物车已经被清空了,请您继续去购买商品吧~~</p>
      <a href="./index.html">去首页</a>
      `;
      cartBox.innerHTML = emptyStr;
    } else {
      // 到这里说明  localStroage 中有 购买记录,并且 cart 数组中存在 购物车信息
      // 根据 数组内容 动态渲染生成页面
      // li之前的固定内容 + 根据数组动态生成的li标签 + li之后的固定内容

      let cartSrt = `
      <h1>全部商品 ${cartArr.length}</h1>
  <div class="cart-box-content">
  <div class="cart-box-title">
    <span class="cart-pro-desc">商品信息</span>
    <span class="cart-pro-price">单价</span>
    <span class="cart-pro-num">数量</span>
    <span class="cart-pro-priceCount">金额</span>
    <span class="cart-pro-operation">操作</span>
  </div>

      `;

      // 根据数组 动态渲染生成的 数据
      cartArr.forEach((item, key) => {
        if (item.buy) {
          number += Number(item.num);
          money += item.num * item.data.goodsPrice;
        }

        cartSrt += `
        <div class="cart-box-pro-box">
        <div class="c-b-proImg">
          <img
            src="${item.data.indexPicUrl}"
            alt="">
        </div>
        <div class="c-b-nameBox">
          <p class="c-b-goodsName">${item.data.goodsName}</p>
          <p class="c-b-skuName">${item.data.goodsName}</p>
        </div>
        <span class="c-b-price">¥${item.data.goodsPrice}</span>
        <div class="c-b-proCount">
          <button class="reduce disreduce" index=${key} name="-" ${
          item.num <= 1 ? "disabled" : ""
        } type="button">-</button>
          <input class="c-b-proCount-input" value="${item.num}"></input>
          <button class="plus displus" index="${key}" name="+" type="button">+</button>
        </div>
        <span class="c-b-priceCount">¥${item.num * item.data.goodsPrice}</span>
        <span class="c-b-operation" name="del">删除</span>
      </div>
        `;
      });

      cartSrt += `
      
</div>
</div>

<div class="cart-submit">
  <div class="cart-submit-box">
    <div class="c-s-box-left"  name="empty">
      <div>
        <img
          src=""
          alt="">
      </div>
      <span>清空购物车</span>
    </div>
    <div class="c-s-box-right">
      <span class="c-s-box-r-preCount">
        已选择
        <span>${number}</span>
        件商品
      </span>
      <span class="c-s-box-r-priceCount">
        合计(不含运费):
        <span>¥${money}</span>
      </span>
      <span class="c-s-box-r-submit">去结算</span>
    </div>
  </div>
</div>
      `;

      cartBox.innerHTML = cartSrt;
    }
  }
}
